import { App as AntdApp, ConfigProvider, theme } from 'antd';
import zhCN from 'antd/locale/zh_CN';
import { RouterProvider } from 'react-router-dom';

import AntdGlobal from '@/components/AntdGlobal';
import ErrorBoundary from '@/components/ErrorBoundary/index.tsx';
import { useUserStore } from '@/store';

import router from './router';

const App = () => {
    /* 数据管理--------------------------------------------------- */
    const isDark = useUserStore((state) => state.isDark);

    return (
        <ConfigProvider
            locale={zhCN}
            theme={{
                // 修改主题主色调变量
                token: {
                    colorPrimary: '#ed6c00'
                },
                // 主题算法配置
                algorithm: isDark ? theme.darkAlgorithm : theme.defaultAlgorithm
            }}
        >
            {/*
                提供可消费 React context 的 message、modal、notification等静态方法,
                在react组件中,简化 message.useMessage() 等方法需要手动植入 contextHolder 的问题。
                https://ant.design/components/app-cn
             */}
            <AntdApp>
                {/*
                    初始化 Ant Design 的全局静态方法（message、notification、modal）
                */}
                <AntdGlobal />
                {/*
                    错误边界组件，捕获子组件树中的 JavaScript 错误，记录这些错误，并显示一个回退 UI，而不是崩溃的组件树。
                 */}
                <ErrorBoundary>
                    <RouterProvider
                        router={router}
                        future={{
                            // 使用 React 的 useTransition 替代 useState 来处理路由状态更新。
                            v7_startTransition: true
                        }}
                    />
                </ErrorBoundary>
            </AntdApp>
        </ConfigProvider>
    );
};

export default App;
